<template>
  <view class="change-phone">
    <mt-navbar title="修改手机号" border-color="#dadbde">
      <template #right>
        <text class="text-#1484EE text-28rpx" @click="handleSubmit">保存</text>
      </template>
    </mt-navbar>
    <view class="mt-32rpx">
      <uv-form ref="changePhoneFormRef" label-position="left" :rules="rules" :model="changePhoneInfo">
        <!-- <mt-title title="当前手机号"></mt-title>
        <uv-form-item>
          <view class="w-100% py-24rpx px-24rpx text-30rpx" style="border-bottom: 1rpx solid #dadbde">{{ currentPhone }}</view>
        </uv-form-item> -->
        <!-- <mt-title title="新手机号" class="mt-32rpx"></mt-title> -->
        <uv-form-item prop="userInfo.phone" class="mb-16rpx">
          <uv-input v-model="changePhoneInfo.userInfo.phone" placeholder="请输入新的手机号" border="bottom" maxlength="11" clearable> </uv-input>
        </uv-form-item>
        <!-- <mt-title title="验证码" class="mt-32rpx"></mt-title> -->
        <uv-form-item prop="userInfo.verifyCode">
          <view class="w-100%" style="position: relative">
            <uv-input v-model="changePhoneInfo.userInfo.verifyCode" placeholder="验证码" border="bottom" maxlength="6"> </uv-input>
            <view class="wrap" style="position: absolute; right: 0; top: 0">
              <uv-toast ref="toast"></uv-toast>
              <uv-code ref="codeRef" :seconds="seconds" @end="end" @start="start" @change="codeChange"></uv-code>
              <view class="text-28rpx text-1C213E pr-40rpx mt-32rpx" @click="getCode">{{ tips }}</view>
            </view>
          </view>
        </uv-form-item>
      </uv-form>
    </view>
    <!-- <view class="px-24rpx"> <mt-button class="w-100% mt-56rpx" style="border-radius: 192rpx" @click="handleSubmit">确认修改</mt-button></view> -->
  </view>
</template>

<script name="ChangePhone" setup>
import { sendVerifyCode } from '@/api/login.js';
import { phoneCheck } from '@/utils/regular.js';
import { updateProviderPhone } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
import userStore from '@/store/user';

const user = userStore();

const codeRef = ref(null);
const changePhoneFormRef = ref(null);

const currentPhone = ref();

const tips = ref('获取验证码');
const seconds = ref(60);

const changePhoneInfo = ref({
  userInfo: {
    phone: user.userInfo.phone,
    verifyCode: undefined
  }
});

const rules = ref({
  'userInfo.phone': [
    {
      type: 'string',
      required: true,
      message: '请输入手机号码',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        return phoneCheck(value);
      },
      message: '请输入正确的手机号',
      trigger: ['blur']
    }
  ],
  'userInfo.verifyCode': {
    type: 'string',
    required: true,
    message: '请输入验证码',
    trigger: ['blur', 'change']
  }
});

const start = () => {};

const end = () => {};

const codeChange = (text) => {
  tips.value = text;
};

const getCode = () => {
  changePhoneFormRef.value.validateField('userInfo.phone', async (err) => {
    if (err && err.length) {
      return false;
    } else if (codeRef.value.canGetCode && changePhoneInfo.value.userInfo.phone !== 'undefined') {
      uni.showLoading({
        title: '正在获取验证码'
      });
      uni.hideLoading();
      codeRef.value.start();
      const params = {
        phone: changePhoneInfo.value.userInfo.phone,
        codeType: 5
      };
      const { code, data } = await sendVerifyCode(params);
      if (code === 200) {
        uni.showToast({
          title: '发送成功',
          icon: 'none'
        });
      }
    } else {
      // uni.$uv.toast('倒计时结束后再发送');
    }
  });
};

// 修改手机号
const handleSubmit = () => {
  changePhoneFormRef.value.validate().then(async (valid) => {
    if (valid) {
      await updateProviderPhone(changePhoneInfo.value.userInfo);
      uni.showToast({
        title: '修改成功',
        icon: 'none'
      });
      user.setUserInfo({
        ...user.userInfo,
        phone: changePhoneInfo.value.userInfo.phone
      });
      uni.navigateBack();
    }
  });
};

onLoad((data) => {
  currentPhone.value = data.phone;
});
</script>

<style lang="scss" scoped>
.change-phone {
  background-color: #f7f7f7;
  min-height: 100vh;
}
:deep(.uv-form-item__body__right__message) {
  margin-left: 56rpx !important;
  margin-top: 8rpx;
}
:deep(.uv-input__content__field-wrapper__field) {
  padding: 17rpx 0;
}
:deep(.uv-form-item__body) {
  background-color: #ffffff;
  padding: 0 32rpx;
}
</style>
